<template>
  <div>
    <div class="ad">
      <el-button @click="show=true">新增</el-button>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="adArr" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="desc" label="描述" width="180"></el-table-column>
        <el-table-column prop="img" label="图片">
          <template slot-scope="scope">
            <img class="ad-img" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog title="新增广告" :visible.sync="show" @close="close">
      <!-- 中间表单区域 -->
      <div>
        <el-input v-model="title"></el-input>

        <el-upload
          :file-list="fileList"
          :action="img.baseUrl+'/api/upload/img'"
          :on-success="success"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <!-- 底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import img from "../../utils/img";
export default {
  name: "QfAd",
  data: function() {
    return {
      img,
      adArr: [],
      show: false,
      fileList: [],
      title: "", // 新增广告的title
      src: "" // 新增广告的src
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 获取广告列表
      let params = {
        hot: false
      };
      this.$http.getGoodList(params).then(res => {
        this.adArr = res;
      });
    },
    reset() {},
    success() {},
    close() {},
    // 提交 新增
    submit() {},
    // 删除一条广告
    remove(res) {
      console.log(res._id);
      this.$http.delGoods({good_id:res._id}).then((arr)=>{
        console.log(arr)
        this.init()
      })
    }
  }
  
};
</script>
<style lang="scss">
.ad {
  padding: 20px;
  background-color: white;
}
.el-upload {
  margin-top: 20px;
}
.ad-img {
  display: inline-block;
  height: 50px;
}
</style>